<template>
  <el-form label-width="140px">
    <el-card style="margin-top: 10px;box-shadow: none;border-radius: 8px;" v-for='(item,i) in customerList' :key="i">
      <h4 v-if="type == 'detail' || type == 'detailView'|| type == 'CollectionWarning'" style="font-weight: bold;text-align: right;color: #409EFF;">
        <dict-tag :options="item.approvalStatus?dict.type.approval_status:dict.type.collection_progress" :value="item.approvalStatus?checkEmptyString(item.approvalStatus):checkEmptyString(item.collectionProgress)" />
      </h4>
      <el-divider v-if="type == 'detail'|| type == 'detailView'|| type == 'CollectionWarning'"></el-divider>
      <h4 v-if="type == 'add'||type == 'detail'" style="font-weight: bold;">客户信息({{i+1}})</h4>
      <el-divider v-if="type == 'add'||type == 'detail'"></el-divider>
      <div class="card-wrap flex-column justify-end">
        <el-descriptions title="客户信息" />
        <div style="word-break: break-all; display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))">
          <div>
            <el-form-item label="客户名称:">
              <span style="color: black;">{{checkEmptyString(item.customer.customerName)}}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="联系方式:">
              <span style="color: black;">{{checkEmptyString(item.customer.customerPhone)}}</span>
            </el-form-item>
          </div>
          <div v-if="item.customer.customerType ==1">
            <el-form-item label="客户住址:">
              <span style="color: black;">{{checkEmptyString(item.customer.customerAddr)}}</span>
            </el-form-item>
          </div>
          <div v-if="item.customer.customerType ==2">
            <el-form-item label="经营地址:">
              <span style="color: black;">{{checkEmptyString(item.customer.customerBusinessAddr)}}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="客户工作单位:" v-if="item.customer.customerType ==1">
              <span style="color: black;">{{checkEmptyString(item.customer.customerWorkPlace)}}</span>
            </el-form-item>
          </div>
        </div>
        <div style="width: 75%; word-break: break-all; display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))">
          <div>
            <el-form-item label="联系人1:">
              <span style="color: black;">{{checkEmptyString(item.customer.primaryContact)}}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="联系人1联系方式:">
              <span style="color: black;">{{checkEmptyString(item.customer.primaryContactPhone)}}</span>
            </el-form-item>
          </div>
          <div v-if="item.customer.customerType ==1">
            <el-form-item label="联系人1与客户关系:">
              <span style="color: black;">{{checkEmptyString(item.customer.primaryContactIdentity)}}</span>
            </el-form-item>
          </div>
          <div v-if="item.customer.customerType ==2">
            <el-form-item label="联系人1职务:">
              <span style="color: black;">{{checkEmptyString(item.customer.primaryContactWorkDuties)}}</span>
            </el-form-item>
          </div>
        </div>
        <div style="width: 75%; word-break: break-all; display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))">
          <div>
            <el-form-item label="联系人2:">
              <span style="color: black;">{{checkEmptyString(item.customer.secondaryContact)}}</span>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="联系人2联系方式:">
              <span style="color: black;">{{checkEmptyString(item.customer.secondaryContactPhone)}}</span>
            </el-form-item>
          </div>
          <div v-if="item.customer.customerType ==1">
            <el-form-item label="联系人2与客户关系:">
              <span style="color: black;">{{checkEmptyString(item.customer.secondaryContactIdentity)}}</span>
            </el-form-item>
          </div>
          <div v-if="item.customer.customerType ==2">
            <el-form-item label="联系人1职务:">
              <span style="color: black;">{{checkEmptyString(item.customer.secondaryContactWorkDuties)}}</span>
            </el-form-item>
          </div>
        </div>
        <div style="width: 50%; word-break: break-all; display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))">
          <div>
            <el-form-item label="客户等级:">
              <dict-tag :options="dict.type.customer_level" :value="checkEmptyString(item.customer.customerLevel)" />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="客户来源:">
              <dict-tag :options="dict.type.customer_source" :value="checkEmptyString(item.customer.customerSource)" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="card-wrap flex-column justify-end">
        <el-descriptions :title="(type =='CollectionManage' || type =='CollectionWarning')?'申请销账逾期信息': '逾期信息'" />
        <div class="table-title-wrap flex-row-center" style="margin-top: 10px">
          <p class="statisticInfo" v-if="(type =='CollectionManage' && type !=='detailView')|| type =='CollectionWarning'">催收编号: <span>{{ item.code }}</span></p>
          <p class="statisticInfo" v-if="type !=='CollectionManage' && type !=='CollectionWarning' && type !=='detailView'&& type !=='detail'">累计催收台数: <span>{{ item.totalOfCollectionUnits }}</span></p>
          <p class="statisticInfo">累计应收金额: <span>{{format_thousand(item.totalOfReceivableAmount) }}</span></p>
          <p class="statisticInfo">累计已收金额: <span>{{ format_thousand(item.totalOfReceivedAmount) }}</span></p>
          <p class="statisticInfo">累计待收金额: <span>{{ format_thousand(item.totalOfWaitAmount) }}</span></p>
          <p class="statisticInfo" v-if="type =='CollectionManage' || type =='CollectionWarning'">累计可销账金额: <span>{{ format_thousand(item.totalOfCanWritableAmount)}}</span></p>
          <p class="statisticInfo" v-if="type =='detailView'|| type =='detail'">累计销账金额: <span>{{ format_thousand(item.totalWriteOffAmount)}}</span></p>
          <p class="statisticInfo" v-if="type !=='CollectionManage' && type !=='detailView'&& type !=='CollectionWarning'&& type !=='detail'">催收金额: <span>{{ format_thousand(item.totalOfCollectionAmount) }}</span></p>
          <p class="statisticInfo" v-if="type =='detailView' ||type =='detail'">本月累计回款金额: <span>{{  format_thousand(item.totalOfThisMonth)}}</span></p>
          <p class="statisticInfo" v-if="type =='detailView'||type =='detail'">今日累计回款金额: <span>{{  format_thousand(item.totalOfToDay)}}</span></p>
        </div>
        <table-page :dataList="item.overdueInformation" border :total="total" isIndex>
          <!-- 普通列插槽 -->
          <template slot="tableCol">
            <el-table-column label="说明" align="center" prop="remark" min-width="150px" show-overflow-tooltip v-if="type == 'detail' || type == 'detailView'" />
            <el-table-column label="发起催收时间" align="center" prop="createTime" v-if="type == 'detail' || type == 'detailView'" min-width="150px" show-overflow-tooltip />
            <el-table-column label="车辆归属" align="center" prop="carAffiliationVal" />
            <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="175px" show-overflow-tooltip>
              <template slot-scope="scope">
                <span @click="goToDetail(scope.row.calcSchemeId, scope.row.processId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" align="center" prop="orderCarCode" min-width="190px" show-overflow-tooltip>
              <template slot-scope="scope">
                <span @click="orderDetail(scope.row)" style="color: #1890ff; cursor: pointer">{{ scope.row.orderCarCode }}</span>
              </template>
            </el-table-column>
            <el-table-column label="业务类型" align="center" prop="sourceBusinessType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.business_type" :value="scope.row.sourceBusinessType" />
              </template>
            </el-table-column>
            <el-table-column label="订单提交人" align="center" prop="orderSubmitter" min-width="100px" show-overflow-tooltip />
            <el-table-column label="品牌/车型/车款" align="center" prop="carInFo" min-width="200px" show-overflow-tooltip />
            <el-table-column label="车牌号" align="center" prop="carPlateNo" min-width="80px" show-overflow-tooltip />
            <el-table-column label="车架号" align="center" prop="carVinNo" min-width="120px" show-overflow-tooltip />
            <el-table-column label="应收类型" align="center" prop="proceedsType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.finance_proceeds_type" :value="scope.row.proceedsType" />
              </template>
            </el-table-column>
            <el-table-column label="核销状态" align="center" prop="checkState">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.finance_proceeds_check_type" :value="scope.row.checkState" />
              </template>
            </el-table-column>
            <el-table-column label="应收金额" align="center" prop="receivableAmount">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.receivableAmount)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="已收金额" align="center" prop="receivedAmount">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.receivedAmount)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="待收金额" align="center" prop="waitAmount">
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.waitAmount)}}</span>
              </template>
            </el-table-column>
            <!-- 申请销账 -->
            <el-table-column label="可销账金额" align="center" prop="dd" v-if="type =='CollectionManage'" min-width="150px" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ format_thousand(scope.row.waitAmount)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="期数" align="center" prop="periodsNum" />
            <el-table-column label="逾期天数" align="center" prop="overdueDay" v-if="type !=='CollectionManage'" />
            <!-- 申请销账 -->
            <el-table-column label="发起催收时间" align="center" prop="createTime" v-if="type =='CollectionManage'" min-width="150px" show-overflow-tooltip />
          </template>
        </table-page>
      </div>
    </el-card>
  </el-form>
</template>

<script>
export default {
  // 工单方案
  name: 'customerInformation',
  dicts: ['customer_source', 'collection_progress', 'approval_status', 'customer_level', 'business_type', 'finance_proceeds_type', 'finance_proceeds_check_type'],
  props: {
    value: {
      type: Array,
      default: [],
    },
    type: {
      type: String,
      default: '',
    },
  },
  computed: {
    customerList: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  data() {
    return {
      total: 0,
    };
  },
  methods: {
    // 额度跳转
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    // 订单详情
    orderDetail(row) {
      console.log(row, 'orderCarCode');
      this._toPage({
        name: "SuborderDetail",
        query: {
          id: row.orderCarId,
          orderCarCode: row.orderCarCode,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .title {
    border-left: 3px solid #3280fc;
    padding-left: 5px;
    box-sizing: border-box;
    font-size: 16px;
  }
}
.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884ff;
  }
}
</style>
